<template>
  <div class="app-container1">
    <div style="font-weight: 700;padding-bottom: 20px;">
    </div>
    <Progress :newStep="param.newStep" />

    <el-row :gutter="10">
      <el-col :span="18">
        <el-card class="pag-container">
          <el-row>
            <el-col :span="10">
              <span style="font-size: 14px;">{{ rowData.companyName }}</span>
              <div m="t-4">
                <el-carousel trigger="click">
                  <el-carousel-item v-for="item in mainFileList" :key="item" style="height: 100%;">
                    <!-- <h3 class="small justify-center" text="2xl">{{ item.url }}</h3> -->
                    <img :src="item.url" style="height: 100%;width: 100%;" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="10">
              <div style="font-size: 14px;text-align: left; box-sizing: border-box;padding: 10px 40px 10px 40px;">
                <el-row :gutter="10">
                  <el-col :span="11">
                    <span style="font-weight: bolder;font-size: 16px;">{{ rowData.carryCityName }}</span>
                    <div style="margin-top: 20px;">
                      提箱城市：{{ rowData.carryCityName }}/{{ rowData.carryCountryName }}
                    </div>
                  </el-col>
                  <el-col :span="2"><img style="text-align: center; width: 17px;"
                      src="@/assets/icons/svg/right.svg"></el-col>
                  <el-col :span="11" style="text-align: right;">
                    <span style="font-weight: 800;font-size: 16px;">{{ rowData.returnCityName }}</span>
                    <div style="margin-top: 20px;">
                      还箱城市：{{ rowData.returnCityName }}/{{ rowData.returnCountryName }}
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <table style="font-size: 14px;width: 400px;margin-top: 30px; text-align: left;">
                      <tr style="width: 100px;">
                        <td>租赁单价</td>
                        <td style="font-weight: 600;"> ￥ {{ param.unitPrice }}</td>
                      </tr>
                      <tr>
                        <td>箱使期</td>
                        <td style="font-weight: 600;"> {{ rowData.boxUsagePeriod }} 天</td>
                      </tr>
                      <tr>
                        <td>箱型</td>
                        <td>
                          {{ boxTypeFilter(param.boxType) }}
                        </td>
                      </tr>
                      <tr>
                        <td>箱况</td>
                        <td>
                          {{ boxConditionFilter(param.boxCondition) }}
                        </td>
                      </tr>
                      <tr>
                        <td style="width:80px; ">租箱量</td>
                        <td>
                          <el-input-number v-model="param.num" :min="0" :max="100" @change="handleChange" />
                          <!-- <span> &nbsp;{{ param.inventory }}</span> -->
                        </td>
                      </tr>
                      <tr>
                        <td style="width:80px; ">超期费</td>
                        <td>
                          <p>
                            超期1天，$10.00/箱/天,超期60天仍未还箱，视为灭失，灭失费$7000元
                          </p>
                        </td>
                      </tr>
                      <tr>
                        <td style="width:80px; ">结算账期</td>
                        <td>
                          <p>首次下单：先付后提，多次下单：提后10天内付</p>
                        </td>
                      </tr>
                    </table>

                  </el-col>
                </el-row>
              </div>

            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="pag-container">
          <table style="height: 343px;">
            <tr>
              <td style="width:100px; ">租箱</td>
              <td>
                {{ boxTypeFilter(param.boxType) }} * {{ param.num }}
              </td>
            </tr>
            <tr>
              <td style="width:100px; ">优惠券</td>
              <td style="width:200px">
                <el-select style="width:100%"></el-select>
              </td>
            </tr>
            <tr>
              <div style="height:200px"> </div>
            </tr>
            <tr>
              <td style="width:100px; ">待付租箱费</td>
              <td>
                ￥ {{ param.unitPrice * param.num }}
              </td>
            </tr>
          </table>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="pag-container">
      <span style="font-weight: 700;font-size: 15px;">
        <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>订单信息
      </span>
      <el-form inline label-width="60px" style="margin-top: 10px;" label-position="left">
        <el-form-item style="width:200px">
          <div>预计提箱日期</div>
          <el-date-picker v-model="param.planPickupDate" type="date" style="width:100%" />
        </el-form-item>
        <el-form-item>
          <div>支付方式</div>
          <el-select v-model="param.paymentMethod" style="width:100%" placeholder="选择">
            <el-option label="对公转账" value="5" />
            <el-option label="在线支付" value="10" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div>*联系人</div>
          <el-input v-model="param.contacts" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item>
          <div>*联系电话</div>
          <el-input v-model="param.tel" style="width:100%"></el-input>
        </el-form-item>

        <el-form-item style="width:200px">
          <div>结算账期</div>
          <el-input v-model="param.tel" style="width:100%">
            <template #append>天</template>
          </el-input>
        </el-form-item>
        <el-form-item style="width:300px">
          <div>超期费</div>
          <el-input v-model="param.tel" style="width:100%">
            <template #append>美元/箱/天</template>
          </el-input>
        </el-form-item>
        <el-form-item style="width:200px">
          <div>灭失超期天数</div>
          <el-input v-model="param.tel" style="width:100%">
            <template #append>天</template>
          </el-input>
        </el-form-item>
        <el-form-item style="width:200px">
          <div>灭失费</div>
          <el-input v-model="param.tel" style="width:100%">
            <template #append>美元</template>
          </el-input>
        </el-form-item>



        <el-form-item>
          <div>留言</div>
          <el-input v-model="param.leaveMsg"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row style="width:100%;text-align: center;margin-top: 30px;">
      <div style="width:100%;text-align: center;">
        <span>
          <el-icon style=" color: green;">
            <CircleCheckFilled />
          </el-icon>
          我已阅读《集装箱租赁业务规则》、《用户服务协议和管理规则》并同意全部条款
        </span>&nbsp;
        <el-button @click="param.dialogVisible = true" type="primary">提交订单</el-button>
      </div>
    </el-row>



    <!-- dialog -->
    <el-dialog v-model="param.dialogVisible" width="500">
      <div v-if="param.isHandleSigned">
        <div style="width: 100%;text-align: center;">
          <el-icon style="color: green;">
            <SuccessFilled />
          </el-icon>
          <div style="color:#212121;font-size: 18px;margin-top: 10px">E签宝协议已发送</div>
          <div><el-button type="primary" style="margin-top: 10px" @click="param.dialogVisible = false">关闭</el-button>
          </div>

        </div>
      </div>
      <div v-else>
        <el-form :model="param">
          <el-form-item label="签署人姓名">
            <el-input v-model="param.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="签署人电话">
            <el-input v-model="param.code" placeholder="请输入验证码" />
          </el-form-item>
          <el-form-item>
            <div style="background-color: #FFF2E7;padding: 5px;box-sizing: border-box;width: 100%">
              <el-icon style="color: #2158F3;">
                <WarningFilled />
              </el-icon> 请确认签署人是否正确，更改签署人将重新发起签署！<br>
              <a href="#" style="padding-left: 20px;color: #7CAFFF;">E签宝协议签订教程</a>
            </div>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button type="primary" @click="param.dialogVisible = false">取消</el-button>
          <el-button @click="handleSign">确认</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script lang="ts" setup>
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { agentAddOrder } from '@/api/orderManage'
import { boxEastAddOrder } from '@/api/orderManage'
import Progress from '@/components/progress/index.vue'
import orderInfo from '@/store/modules/order'
const $route = useRoute();
const router = useRouter()



const param = reactive({
  dialogVisible: false,
  isHandleSigned: false,
  boxConditionList: [],
  boxTypeList: [],
  boxType: '',
  boxCondition: '',
  num: 0,
  page: 1,
  limit: 10,
  newStep: 1,

  //订单分配 
  // operateUsers: [],
  operateUserList: [{ "operateUserId": 3, "operateUserName": "张三" }, { "operateUserId": 5, "operateUserName": "王五" }],
  // businessUser: '',
  businessUserList: [{ "businessUserId": 4, "businessUserName": "李四" }, { "businessUserId": 6, "businessUserName": "赵六" }],
  // businessNo: '',
  allocation: [{ 'operateUsers': [3, 5], "businessUser": 4, "businessNo": "NO1234567890" }],
  // form0: { 'operateUsers': [3, 5], "businessUser": 2, "businessNo": "NO1234567890" },
})

const inventory = computed(() => {
  let tagDataList = rowData.value.releaseRentPriceList
  let num = 0
  if (!tagDataList) return 0
  tagDataList.forEach((item: any) => {
    if (item.boxType == param.boxType && item.boxCondition == param.boxCondition) {
      num = item.inventory
    }
  })

  param.inventory = num - param.num
  return num - param.num
})

// watch($route, async () => {
//   console.log('----watch')
//   getSetBoxInfo()
// })
onActivated(() => {
  console.log('onActivated')
  getSetBoxInfo()
  param.isHandleSigned = false

})

// 获取数据
const mainFileList = ref([])
const rowData = ref([])
const getSetBoxInfo = async () => {
  const row = orderInfo().rowData
  if (row) {
    const result = row.row
    rowData.value = result
    param.newStep = result.status
    mainFileList.value = JSON.parse(result.mainFileList)
    // detailFileList.value = JSON.parse(result.detailFileList)
    const data = row.submitData
    setBoxInfo(data)
  }
}

// 
const setBoxInfo = (data: any) => {
  param.boxType = data.boxType
  param.boxCondition = data.boxCondition
  param.num = data.num
  param.unitPrice = data.unitPrice
  param.inventory = data.inventory
}

//
const handleChange = (value: Number) => {
  console.log(value)
  if (!inventory) {

  }
}

//过滤 
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const operateUserNameFilter = (val: any) => {
  let result = ''
  param.operateUserList.map((item: { operateUserId: any; }) => {
    if (item.operateUserId == val) {
      result = item.operateUserName
    }
  })
  return result
}

// 签署
const handleSign = () => {
  console.log('handleSign')
  param.isHandleSigned = true
  let allocation = getAllocationTemplate()
  const data = {
    "releaseRentId": rowData.value.id,
    "planPickupDate": param.planPickupDate,
    "boxType": param.boxType,
    "boxCondition": param.boxCondition,
    "boxQuantity": param.num,
    "paymentMethod": param.paymentMethod,
    "contacts": param.contacts,
    "tel": param.tel,
    "leaveMsg": param.leaveMsg,
    "allocation": JSON.stringify(allocation)
    //allocation:[{ operateUsers: [{ "operateUserId": 1, "operateUserName": "操作员" }], "businessUserId": 2, "businessUserName": "业务员", "businessNo": "NO1234567890" }]
  }

  boxEastAddOrder(data).then((res: any) => {
    console.log(res)
    router.push('/EQianBao_success')
  })
  param.dialogVisible = false
}

const getAllocationTemplate = () => {
  let arry = []
  param.allocation.forEach((el, index) => {
    const operateUsers: any = []
    el.operateUsers.map((id: any) => {
      operateUsers.push({ "operateUserId": id, "operateUserName": operateUserNameFilter(id) })
    })
    const businessUser = param.businessUserList.find((item: any) => {
      return item.businessUserId == el.businessUser
    })
    arry.push({ "operateUsers": operateUsers, "businessUserId": el.businessUser, "businessUserName": businessUser.businessUserName, "businessNo": el.businessNo })
  })
  return arry
}

</script>
<style lang="scss" scoped>
.pag-container {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 10px;
}
</style>